KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা data-binding এবং dependency tracking এর মাধ্যমে ডাইনামিক ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। KnockoutJS তে style এবং class এর সাথে data-binding ব্যবহার করা যায়, যা আপনাকে ইউজার ইন্টারফেসে বিভিন্ন স্টাইল এবং CSS ক্লাসকে ডেটার সাথে সিঙ্ক্রোনাইজ করার সুবিধা দেয়।
এখানে KnockoutJS তে Style Binding এবং Class Binding ব্যবহারের বিস্তারিত আলোচনা করা হয়েছে।
1. Style Binding in KnockoutJS
Style binding ব্যবহার করে আপনি HTML এলিমেন্টের CSS styles কে একটি observable বা computed observable এর মানের সাথে যুক্ত করতে পারেন। এর মাধ্যমে আপনি UI-এ রিয়েল-টাইমে স্টাইল পরিবর্তন করতে পারেন, যখন ডেটা পরিবর্তিত হয়।
Style Binding Syntax:
<div data-bind="style: { color: color, backgroundColor: bgColor }">
This is a styled div!
</div>
এখানে:
data-bind="style"দ্বারা আপনি CSS styles এর সাথে ডেটাকে বাইন্ড করছেন।colorএবংbackgroundColorহল CSS স্টাইল প্রপার্টি যা observable এর মানের সঙ্গে সিঙ্ক্রোনাইজ হবে।
Style Binding Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Style Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<div>
<label for="color">Choose Text Color:</label>
<input type="color" id="color" data-bind="value: color, valueUpdate: 'input'">
</div>
<div data-bind="style: { color: color }">
This text will change color dynamically.
</div>
<script>
function AppViewModel() {
this.color = ko.observable('#000000'); // Default color
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
colorএকটি observable যা HTML ইনপুট ফিল্ডে নির্বাচিত রঙকে ট্র্যাক করছে।data-bind="style: { color: color }"দ্বারা div ট্যাগের টেক্সটের রঙ পরিবর্তন করা হচ্ছে, যেটি color observable এর মানের উপর নির্ভরশীল।
2. Class Binding in KnockoutJS
Class binding এর মাধ্যমে আপনি HTML এলিমেন্টের CSS classes কে ডেটার সাথে সিঙ্ক্রোনাইজ করতে পারেন। এটি ডাইনামিকভাবে ক্লাস যোগ বা মুছে ফেলতে ব্যবহৃত হয়, যখন ডেটার মান পরিবর্তিত হয়।
Class Binding Syntax:
<div data-bind="css: { 'highlight': isHighlighted }">
This is a div with dynamic class.
</div>
এখানে:
data-bind="css"দ্বারা আপনি CSS classes এর সাথে observable এর মান সিঙ্ক্রোনাইজ করছেন।'highlight': isHighlightedএখানেhighlightCSS ক্লাস যোগ করা হবে, যদি isHighlighted observabletrueহয়।
Class Binding Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Class Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<label for="highlightToggle">Highlight Text:</label>
<input type="checkbox" id="highlightToggle" data-bind="checked: isHighlighted">
</div>
<div data-bind="css: { 'highlight': isHighlighted }">
This text will be highlighted when the checkbox is checked.
</div>
<script>
function AppViewModel() {
this.isHighlighted = ko.observable(false); // Default state is false
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
isHighlightedএকটি observable যা চেকবক্সের মান ট্র্যাক করছে। যখন চেকবক্স চেক করা হয়, তখনhighlightক্লাসটি div-এ যোগ হয়ে যাবে, যা এর ব্যাকগ্রাউন্ড এবং ফন্ট স্টাইল পরিবর্তন করবে।
3. Style and Class Binding with Dynamic Expressions
KnockoutJS তে আপনি conditional expressions ব্যবহার করে style এবং class বাইন্ডিং করতে পারেন, যেখানে শর্ত অনুযায়ী স্টাইল বা ক্লাস অ্যাপ্লাই করা হবে।
Example: Dynamic Class and Style Binding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Style and Class Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<style>
.positive {
color: green;
}
.negative {
color: red;
}
</style>
</head>
<body>
<div>
<label for="numberInput">Enter a number:</label>
<input type="number" id="numberInput" data-bind="value: number, valueUpdate: 'input'">
</div>
<div data-bind="css: { 'positive': isPositive, 'negative': !isPositive }, style: { fontSize: fontSize }">
The number is: <span data-bind="text: number"></span>
</div>
<script>
function AppViewModel() {
var self = this;
self.number = ko.observable(0); // Default number is 0
self.isPositive = ko.computed(function() {
return self.number() > 0; // Check if the number is positive
});
self.fontSize = ko.computed(function() {
return self.number() > 0 ? '20px' : '16px'; // Change font size based on number
});
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
cssbinding এর মাধ্যমে, আপনি positive বা negative ক্লাস যোগ করছেন, নির্ভর করে ইউজার যে সংখ্যা ইনপুট করেছেন তা ধনাত্মক (positive) না নেতিবাচক (negative)।stylebinding এর মাধ্যমে, ইনপুট নাম্বারের উপর ভিত্তি করে fontSize পরিবর্তিত হচ্ছে।
সারাংশ:
- Style Binding:
- Style binding ব্যবহার করে আপনি UI-এ সরাসরি CSS স্টাইল প্রয়োগ করতে পারেন, যেখানে observable এর মান পরিবর্তন হলে স্টাইলও আপডেট হয়।
- এটি আপনার অ্যাপ্লিকেশনকে রিয়েল-টাইম স্টাইল আপডেট করার ক্ষমতা প্রদান করে।
- Class Binding:
- Class binding ব্যবহার করে আপনি UI এলিমেন্টগুলিতে CSS ক্লাস যোগ বা মুছে ফেলতে পারেন, যা ডেটার মানের উপর নির্ভরশীল হয়।
- এটি ডাইনামিক ক্লাস ম্যানিপুলেশনের মাধ্যমে UI তে পরিবর্তন আনতে সাহায্য করে।
- Conditional Style/Class Binding:
- KnockoutJS এ conditional expressions ব্যবহার করে আপনি UI তে ক্লাস বা স্টাইল শর্তসাপেক্ষে অ্যাপ্লাই করতে পারেন।
KnockoutJS এর style এবং class binding এর মাধ্যমে আপনি আপনার ইউজার ইন্টারফেসকে অত্যন্ত ডাইনামিক এবং রিয়েল-টাইমে ইন্টারঅ্যাকটিভ করতে পারবেন।
Content added By
Read more
